<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>苹果大数据应用平台</title>
    <link rel="stylesheet" href="../Lib/iconfont/iconfont.css">
    <!-- <link rel="stylesheet" href="../Lib/scroll/jquery.scrollbar.css" /> -->
    <link rel="stylesheet" href="../css/common.css">
    <script src="../Lib/jquery-1.12.4.min.js"></script>
    <script src="../Lib/time-scrollbar.js"></script>
    <script src="../Lib/scroll/jquery.scrollbar.min.js"></script>
    <style>
    .echart-desc .zhang,
    .echart-desc .die {
        position: relative;
    }

    .echart-desc .zhang > div,
    .echart-desc .die > div {
        position: absolute!important;
        left: 50%;
        top: 0;
        font-size: 20px;
    }

    .echart-desc .zhang > div i,
    .echart-desc .die > div i {
        margin-right: 5px;
    }

    .echart-desc .zhang > div {
        color: #fb7110!important
    }

    .echart-desc .die > div {
        color: #35d332!important
    }
    .fake-ul .sel-area:hover, .fake-ul .iconfont{
      cursor: pointer;
    }
    </style>
</head>

<body class="price_forecast">
    <div class="head">
    <h3 class="title">
        <div class="logo icon-logo"></div>
        <div class="line"></div>
        <div class="name">苹果大数据应用平台</div>
    </h3>
    <div class="navigation">
        <ul class="nav">
            <li class="nav-item index"><a href="index.html">首页</a></li>
            <li class="nav-item apple-product"><a href="apple_product.html">苹果生产</a></li>
            <li class="nav-item apple-consume"><a href="consume_situation.html">苹果消费</a></li>
            <li class="nav-item commerce"><a href="trade_situation.html">对外贸易</a></li>
            <li class="nav-item market-price"><a href="price_monitor.html">市场价格</a></li>
            <li class="nav-item cost-income"><a href="income_cost.html">成本收益</a></li>
        </ul>
        <div class="profile">
            <button><i class="iconfont icon-yonghu"></i></button>
            <button><i class="iconfont icon-shezhi"></i></button>
            <button><i class="iconfont icon-tuichu"></i></button>
        </div>
    </div>
</div>

    <div class="wrapper">
        <div class="nav-bar-bg">
    <dl class="nav-bar">
        <dt class="navbar-item price_monitor">
            <h2><i class="iconfont icon-monitor"></i><a href="price_monitor.html">价格监测</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#price_monitor_实时监测">实时监测</a></li>
                <li><a href="#price_monitor_涨跌幅排名">涨跌幅排名</a></li>
                <li><a href="#price_monitor_价格走势">价格走势</a></li>
                <li><a href="#price_monitor_季节性规律">季节性规律</a></li>
            </ul>
        </dt>
        <!--<dt class="navbar-item price_market" id="section-2">
            <h2><i class="iconfont icon-liutong"></i><a href="price_market.html">市场流通</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#price_market_流向监测">流向监测</a></li>
                <li><a href="#price_market_流向分析">流向分析</a></li>
            </ul>
        </dt>-->
        <dt class="navbar-item price_conduction" id="section-3">
            <h2><i class="iconfont icon-chuandao"></i><a href="price_conduction.html">传导机制</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#price_conduction_地区性">地区性</a></li>
                <li><a href="#price_conduction_时滞性">时滞性</a></li>
            </ul>
        </dt>
        <dt class="navbar-item price_affect" id="section-4">
            <h2><i class="iconfont icon-yingxiang"></i><a href="price_affect.html">影响因素</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#price_affect_各环节价格">各环节价格</a></li>
                <li><a href="#price_affect_多因素影响">多因素影响</a></li>
            </ul>
        </dt>
        <dt class="navbar-item price_forecast" id="section-5">
            <h2><i class="iconfont icon-yuce"></i><a href="price_forecast.html">预测预警</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#price_forecast_价格预警">价格预警</a></li>
                <li><a href="#price_forecast_涨跌预警">涨跌预警</a></li>
            </ul>
        </dt>
    </dl>
</div>

        <div class="cont">
            <div id="price_forecast_价格预警" class="section forecast">
                <div class="sec-top">
                    <h3 class="pub-title">价格预测</h3>
                    <div class="special-else">
                        <ul class="time-tab price">
                            <li class="active">未来一周</li>
                            <li>未来一月</li>
                        </ul>
                    </div>
                </div>
                <div class="sectop-two">
                    <div class="sel-areas">
                        <span>地区： </span>
                        <div class="fake-ul">
                            <span class="sel-area">北京</span>
                            <i class="iconfont icon-xiala"></i>
                            <ul class='priceSelect'>
                                <li>新疆维吾尔族自治区</li>
                                <li>山西</li>
                                <li>陕西</li>
                                <li>河南</li>
                                <li>山东</li>
                            </ul>
                        </div>
                    </div>
                    <div class="else">
                        <div class="help">
                            <button><i class="iconfont icon-wenhao"></i></button>
                            <div class="help-ct weather-help">
                                <div class="diy-scroll wbIntro">
                                    <p>基于GARCH模型拟合价格的变化，用通过检验的GARCH模型对未来一期的平均价格进行预测。</p>
                                    <p class="help-title">(1)计算思路</p>
                                    <p>GARCH模型是一个针对金融数据的回归模型，以变量过去的波动和外部冲击各自对本期波动的影响进行建模，实现波动性的分析和预测。使用经过平稳处理的价格序列，即对数收益率来拟合GARCH模型，并对拟合模型的残差做自相关LB检验，通过检验后使用模型预测未来一期的价格对数收益率，进而换算为未来一期的苹果价格。</p>
                                    <p class="help-title">(2)数据来源</p>
                                    <p>农业部</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sec-ct tab-ct">
                    <div>
                        <div class="sec-part">
                            <div id="priceYuce" class="echart-box"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="price_forecast_涨跌预警" class="section forecast">
                <div class="sec-top">
                    <h3 class="pub-title">涨跌预警</h3>
                    <div class="else">
                        <div class="help">
                            <button><i class="iconfont icon-wenhao"></i></button>
                            <div class="help-ct weather-help">
                                <div class="diy-scroll wbIntro">
                                    <p>基于GARCH模型拟合价格的变化，用通过检验的GARCH模型对未来一期的平均价格进行预测。</p>
                                    <p class="help-title">(1)计算思路</p>
                                    <p>GARCH模型是一个针对金融数据的回归模型，以变量过去的波动和外部冲击各自对本期波动的影响进行建模，实现波动性的分析和预测。使用经过平稳处理的价格序列，即对数收益率来拟合GARCH模型，并对拟合模型的残差做自相关LB检验，通过检验后使用模型预测未来一期的价格对数收益率，进而换算为未来一期的苹果价格。</p>
                                    <p class="help-title">(2)数据来源</p>
                                    <p>农业部</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="special-else">
                        <ul class="time-tab zdTime">
                            <li class="active">未来一周</li>
                            <li>未来一月</li>
                        </ul>
                    </div>
                </div>
                <div class="sec-ct tab-ct">
                    <div>
                        <div class="sec-part">
                            <div class="echart-desc">
                                <div class="zhang">
                                    <div><i class="iconfont icon-kanzhang"></i>涨</div>
                                </div>
                                <div class="die">
                                    <div><i class="iconfont icon-zhang"></i>跌</div>
                                </div>
                            </div>
                            <div id="zdYujing" class="echart-box important"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 整体的背景图片样式 -->
    <!-- 图片背景 -->
<div class="body-bg">
    <img src="../images/bg_body.jpg">
</div>

    <script src="../Lib/Echarts/echarts.common.min.js"></script>
    <script src="../Lib/Echarts/echarts-engine.js"></script>
    <script type="text/javascript" src="../js/public.js"></script>

    <script>
    $(function() {
        //价格预测模拟数据 未来一周
        var min = 10;
        var priceData = {
                year: ['2016-10-1', '2016-10-2', '2016-10-3', '2016-10-4', '2016-10-5', '2016-10-6', '2016-10-7'],
                data1: [10, 20, 30, 40, 50, 10,30],
                data2: [30, 10, 20, 80, 10, 30],
                min:min
            }
            //价格预测模拟数据 未来一月
        var priceData1 = {
                year: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                data1: [10, 20, 30, 40, 50, 10, 20, 30, 40,10],
              //  data2: [30, 10, 20, 80, 10, 30, 10, 20, 80 ]
            }
            //价格预测初始化图表 & 填装默认数据
        var priceChartObj = new priceYuce('priceYuce');
        priceChartObj.init(priceData);
        //价格预测未来一周和未来一月切换
        $(".time-tab.price").on('click', 'li', function() {
                //可取得当前选择的地区
                console.log($('.sel-area').val());
                if ($(this).text() === '未来一周') {
                    console.log('未来一周')
                    priceChartObj.init(priceData);
                } else if ($(this).text() === '未来一月') {
                    console.log('未来一月')
                    priceChartObj.init(priceData1);
                }
            })
            //价格预测下拉地区
        $(".priceSelect li").on('click', function() {
            //取得当前选择的时间
            var currentTime;
            $('.time-tab.price li').each(function(i, a) {
                if ($(this).hasClass('active')) {
                    currentTime = $(this).text();
                }
            })
            console.log(currentTime);

            var text = $(this).text();
            console.log(text);
            priceChartObj.init(priceData1);
        })


        /****
          涨跌幅排名图表
          正负在一个X轴上，地区，数据的涨跌都需要放在一个数组里传入
        ****/
        //模拟地区数据 & 排名数据(涨跌都在一个数组，前5个是涨 后5个是跌)
        var zdData = {
            areaData: ['北京', "山西", "陜西", "河南", "河北", '广州', '湖北', '山东', '湖南', '天津'],
            // 传涨幅从高到低 再传跌幅从低到高都转成正数
            data: [50, 40, 30, 20, 10, 10, 20, 30, 40, 70]
        };

        var zdChartObj = new zdRanking('zdYujing');
        zdChartObj.init(zdData);

        //涨跌预警未来一周和未来一月切换
        $(".time-tab.zdTime").on('click', 'li', function() {
            if ($(this).text() === '未来一周') {
                console.log('未来一周')
                zdChartObj.init(zdData);
            } else if ($(this).text() === '未来一月') {
                console.log('未来一月')
                zdChartObj.init(zdData);
            }
        })
    })

    function priceYuce(dom) {
        this.dom = dom;
        this.myChart = echarts.init(document.getElementById(dom));
        this.opts = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    align: 'left',
                    color: '#5cc1ff',
                    fontSize: '16'
                },
                backgroundColor: 'rgba(15, 52, 135, 0.5)',
                borderWidth: '1',
                borderColor: '#5cc1ff',
                extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);',
                formatter: function(params) {
                    console.log(params)
                    if(!params[1]){
                      return params[0].axisValue + '<br/>'
                           + params[0].seriesName + ':' + params[0].data + ' 元/公斤' + '<br/>'
                           + '实际' + ':' + '-' + '<br/>'
                    }
                    return params[0].axisValue + '<br/>'
                         + params[0].seriesName + ':' + params[0].data + ' 元/公斤' + '<br/>'
                         + params[1].seriesName + ':' + params[1].data + ' 元/公斤' + '<br/>'

                },
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            legend: {
                data: ['预测', '实际'],
                top: 0,
                right:60,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },

            grid: {
                left: '15',
                right: '80',
                bottom: '30',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#3fa7dc'
                    }
                },
                axisLabel:{
                  textStyle:{
                    color:echartOpt.color,
                    fontSize: echartOpt.fz
                  }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                triggerEvent: true,
                data: ''
            },
            yAxis: {
                type: 'value',
                name: '元/公斤',
                axisLine: {
                    lineStyle: {
                        color: '#3fa7dc'
                    },

                },
                nameTextStyle:{
                	color:'#fff'
                },
                axisLabel:{
                  textStyle:{
                    color:echartOpt.color,
                    fontSize: echartOpt.fz
                  }
                },
                splitLine: {
                    show: true,
                    formatter: '{value}',
                    lineStyle: {
                        color: '#476bbe'
                    }
                }

            },
            color: ['#fc9c41', '#2dc25a'],
            series: [{
                    name: '预测',
                    type: 'line',
                    // areaStyle: {
                    //     normal: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //             offset: 0,
                    //             color: 'rgba(176,150,58,1)'
                    //         }, {
                    //             offset: 1,
                    //             color: 'rgba(176,150,58,.5)'
                    //         }])
                    //     }
                    // },
                    data: ''

                }, {
                    name: '实际',
                    type: 'line',
                    // areaStyle: {
                    //     normal: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //             offset: 0,
                    //             color: 'rgba(82,177,91,.7)'
                    //         }, {
                    //             offset: 1,
                    //             color: 'rgba(82,177,91,.3)'
                    //         }])
                    //     }
                    // },
                    data: [12, 12, 12]
                }


            ]


        };
    }
    priceYuce.prototype.init = function(chartObj) {
        //设置年份
        this.opts.xAxis.data = chartObj.year;
        //设置预测和实际数据
        this.opts.series[0].data = chartObj.data1;
        this.opts.series[1].data = chartObj.data2;
        this.opts.yAxis.min = chartObj.min;
        console.log(this.opts.series)
        this.myChart.setOption(this.opts)
    }


    function zdRanking(dom) {
        this.myChart = echarts.init(document.getElementById(dom));
        this.opts = {
            //backgroundColor: '#1b237e',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    align: 'left',
                    color: '#5cc1ff',
                    fontSize: '16'
                },
                backgroundColor: 'rgba(15, 52, 135, 0.5)',
                borderWidth: '1',
                borderColor: '#5cc1ff',
                extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);',
                formatter: function(params, ticket, callback) {

                    if (params[0].dataIndex < 5) {
                        return params[0].name + "<br />" +
                            "涨跌幅预测 ：" +
                            "<span style='color:#ff8a00;font-weight:blod;font-size:18px;'>" + params[0].value + " </span>%";
                    } else {
                        return params[0].name + "<br />" +
                            "涨跌幅预测 ：" +
                            "<span style='color:#ff8a00;font-weight:blod;font-size:18px;'>" + -params[0].value + " </span>%";
                    }

                }

            },
            label: {
                normal: {
                    textStyle: {
                        color: "#ff3b00"
                    }
                },
                emphasis: {
                    textStyle: {
                        color: "#ff3b00"
                    }
                }
            },
            grid: {
                left: '1%',
                right: '1%',
                bottom: '1%',
                top: '30',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                name: '单位(%)',
                axisLabel:{
                  textStyle:{
                    color:echartOpt.color,
                    fontSize: echartOpt.fz
                  }
                }, nameTextStyle:{
                	color:'#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#8ac7ff'
                    }
                },
                axisTick: {
                    show: false,
                    interval: 0,
                    alignWithLabel: true
                },
                splitLine: {
                    show: false,
                    formatter: '{value}',
                    lineStyle: {
                        color: '#476bbe'
                    }
                }
            },
            xAxis: {
                type: 'category',
                name: '',
                data: '',
                axisLabel:{
                  textStyle:{
                    color:echartOpt.color,
                    fontSize: echartOpt.fz
                  }
                },
                axisLine: {
                    lineStyle: {
                        color: '#8ac7ff'
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barWidth: 20,
                label: {
                    normal: {
                        show: false

                    }
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: function(params) {
                            var colorList = [new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(255, 82, 22, 0.4)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(255, 152, 52)'
                                }]),
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(49, 175, 78, 0.4)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(49, 175, 78)'
                                }])
                            ];
                            // return colorList[params.dataIndex];
                            if (params.dataIndex < 5) return colorList[0]
                            else return colorList[1]
                        }
                    }

                },
                // 选传涨幅从高到低 再传跌幅从低到高都转成正数
                data: ''
            }]
        };

    }

    zdRanking.prototype.init = function(chartObj) {
        this.opts.xAxis.data = chartObj.areaData;
        this.opts.series[0].data = chartObj.data;
        this.myChart.setOption(this.opts)
    }
    </script>
</body>

</html>
